<template>
  <div>
    <el-radio-group v-model="imageData.typeId" size="small" @change="getImageType">
      <el-radio-button
        :label="item.type"
        v-for="item in imagesGroup"
        :key="item.type"
      >{{item.lable}}</el-radio-button>
    </el-radio-group>
    <div class="imgesList" v-loading="loading">
      <el-upload
        ref="upload"
        name="files"
        :limit="20"
        :action="GLOBAL.urlRoot+ GLOBAL.productService + '/productFile/saveFiles'"
        :data="imageData"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :file-list="imageList"
        :auto-upload="false"
        multiple
        :before-remove="beforeRemove"
        :on-success="onSuccess"
        :on-error="uploadError"
        :on-exceed="uploadExceed"
        :on-change="handleChange"
        accept=".bmp, .jpg, .jpeg, .png, .tiff, .gif, .pcx, .tga, .exif, .fpx, .svg, .psd, .cdr, .pcd, .dxf, .ufo, .eps, .ai, .raw, .wmf"
        :http-request="httpRequest"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog
        :visible.sync="dialogVisible"
        :title="imagesGroup.find(item => item.type === imageData.typeId).lable"
      >
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </div>
    <el-button
      type="primary"
      size="small"
      @click="uploadImg"
      :disabled="updLoading"
      :icon="updLoading?'el-icon-loading':'el-icon-upload2'"
    >上传图片</el-button>
    <el-button
      type="success"
      size="small"
      @click="downloadIamge"
      :disabled="downLoading"
      :icon="downLoading?'el-icon-loading':'el-icon-download'"
    >下载图片</el-button>
  </div>
</template>   
<script>
const ERR_OK = 200;
export default {
  props: {
    basicInfo: Object,
  },
  data() {
    return {
      imageData: {
        typeId: 1,
      },
      imageList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      updLoading: false,
      downLoading: false,
      loading: true,
    };
  },
  created() {
    this.imageData.productId = this.basicInfo.productId;
    this.getImageType();
  },
  computed: {
    imagesGroup() {
      return [
        {
          lable: this.$t("m.button.WindowMap"),
          type: 1,
        },
        {
          lable: this.$t("m.button.EBC"),
          type: 2,
        },
        {
          lable: this.$t("m.button.BrandPromotionMap"),
          type: 3,
        },
        {
          lable: this.$t("m.button.physicalMap"),
          type: 4,
        },
        {
          lable: this.$t("m.button.packagingPicture"),
          type: 5,
        },
        {
          lable: this.$t("m.button.manualPicture"),
          type: 6,
        },
        {
          lable: this.$t("m.button.other"),
          type: 7,
        },
      ];
      productBasicInfo - wrap;
    },
  },
  methods: {
    getImageType() {
      this.loading = true;
      this.$ajax({
        method: "get",
        url:
          this.GLOBAL.productService +
          "/productFile/findByProductIdAndTypeId?productId=" +
          this.basicInfo.productId +
          "&typeId=" +
          this.imageData.typeId +
          "&fileType=IMAGE",
      }).then((res) => {
        if (res.data.code === ERR_OK) {
          this.imageList = res.data.data;
        }
        this.loading = false;
      });
    },
    uploadImg() {
      if (this.$refs.upload.uploadFiles.find((item) => !item.productImgId)) {
        this.updLoading = true;
      }
      this.$refs.upload.submit();
    },
    httpRequest(params) {
      console.log(params);
      const file = params.file;
      const form = new FormData();
      // 文件对象
      form.append("files", file);
      form.append( 'typeId',this.imageData.typeId);
      form.append( 'productId',this.imageData.productId);
      this.$ajax({
        method: "post",
        url: this.GLOBAL.productService + "/productFile/saveFiles",
        data: form,
      }).then((res) => {
        this.updLoading = false;
        if (res.data.code === ERR_OK) {
          this.$message.success("上传成功");
        } else {
          this.$message.error(res.data.msg);
        }
        this.getImageType();
      });
    },
    onSuccess(res) {
      console.log(res, "---------------");
      if (res.code === ERR_OK) {
        this.$message.success("上传成功");
      } else {
        this.$message.error(res.msg);
      }
      this.getImageType();
      this.updLoading = false;
    },
    uploadError(err, file, fileList) {
      this.updLoading = false;
      this.$message.error("上传出错,请重新上传----" + err);
    },
    uploadExceed(file, fileList) {
      this.$message.warning(
        `当前限制选择 20 个文件，本次选择了 ${file.length} 个文件，共选择了 ${
          file.length + fileList.length
        } 个文件`
      );
    },
    handleChange(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 20MB!");
      }
    },
    //删除
    beforeRemove(file, fileList) {
      if (!file.productImgId) {
        return true;
      }
      return new Promise((resolve, reject) => {
        this.$confirm("是否确定删除图片!", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$ajax({
              method: "post",
              url:
                this.GLOBAL.productService +
                "/productFile/dropFiles?fileIds=" +
                file.productImgId +
                "&fileType=IMAGE",
            }).then((res) => {
              if (res.data.code === ERR_OK) {
                this.$message.success("删除成功");
                resolve(true);
              } else {
                reject(false);
                this.$message.error(res.data.msg);
              }
            });
          })
          .catch(() => {
            reject(false);
          });
      });
    },
    handleRemove(file, fileList) {},
    //放大
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片下载
    downloadIamge() {
      this.downLoading = true;
      let productImgId = this.imageList.map((item) => item.productImgId);
      this.$ajax({
        method: "get",
        url: this.GLOBAL.productService + "/productFileDownload/zipDownload",
        params: {
          ids: productImgId.join(),
          type: "IMAGE",
        },
      }).then((res) => {
        this.downLoading = false;
        if (res.status === ERR_OK) {
          open(res.request.responseURL);
          this.$message.success(res.data.data);
        }
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
.imgesList {
  margin: 10px 0;
  overflow: auto;
}
</style>
